<template>
  <div class="search_page">
    <div class="search_menu">
      <!-- 菜单 开始 -->
      <div class="w1200 menu_box">
        <nuxt-link
          :to="`/search?sid=${item.id}&term=${term}`"
          class="cell"
          :class="menuId == item.id ? 'active' : ''"
          v-for="(item, index) in menus"
          :key="`s_menu_${index}`"
          replace
          >{{ item.name }}</nuxt-link
        >
        <!-- <div class="cell" :class="menuId == item.id ? 'active' : ''" v-for="(item, index) in menus"
          :key="`s_menu_${index}`" @click="menuEvent(item)">
          {{ item.name }}
        </div> -->
      </div>
      <!-- 菜单 end -->
    </div>
    <div class="w1200">
      <!-- 面包屑 开始 -->
      <div class="breadcrumb">
        <el-breadcrumb  class="el_breadcrumb" separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>搜索</el-breadcrumb-item>
          <el-breadcrumb-item>{{ getBreadcrumb() }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 面包屑 end -->

      <!-- 内容区域 开始 -->
      <div class="content search_content">
        <!-- 左侧医院列表 开始 -->
        <div class="left_box">
          <!-- 医院列表 开始 -->
          <template v-if="menuId == 2">
            <div class="hospital_list">
              <template v-if="hospitalList && hospitalList.length">
                <ListHospital
                  v-for="(item, index) in hospitalList"
                  :key="`hospital_${index}`"
                  :info="item"
                />
              </template>
              <NoData v-else />
            </div>
          </template>
          <!-- 医院列表 end -->

          <!-- 医生列表 开始 -->
          <template v-if="menuId == 3">
            <div class="hospital_list doctor_list">
              <template v-if="doctorList && doctorList.length">
                <div
                  class="list_doctor"
                  v-for="(item, index) in doctorList"
                  :key="`doctor_${index}`"
                >
                  <Doctor size="small" :info="item" />
                </div>
                <template v-if="doctorList.length % 4">
                  <div
                    class="hidden_cell"
                    v-for="(hitem, idx) in 4 - (doctorList.length % 4)"
                    :key="`hi_${idx}`"
                  ></div>
                </template>
              </template>
              <NoData v-else />
            </div>
          </template>
          <!-- 医生列表 end -->

          <!-- 商品列表 开始 -->
          <template v-if="menuId == 4">
            <div class="hospital_list goods_list">
              <template v-if="goodsList && goodsList.length">
                <div
                  class="list_doctor"
                  v-for="(item, index) in goodsList"
                  :key="`goods_${index}`"
                >
                  <Goods :info="item" />
                </div>
                <template v-if="goodsList.length % 4">
                  <div
                    class="hidden_cell"
                    v-for="(hitem, idx) in 4 - (goodsList.length % 4)"
                    :key="`hi_${idx}`"
                  ></div>
                </template>
              </template>
              <NoData v-else />
            </div>
          </template>
          <!-- 商品列表 end -->

          <!-- 资讯列表 开始 -->
          <template v-if="menuId == 6">
            <div class="hospital_list news_list">
              <template v-if="newsList && newsList.length">
                <ListNews
                  v-for="(item, index) in newsList"
                  :key="`news_${index}`"
                  :info="item"
                />
              </template>
              <NoData v-else />
            </div>
          </template>
          <!-- 资讯列表 end -->

          <!-- 问答列表 开始 -->
          <template v-if="menuId == 7">
            <div class="hospital_list question_list">
              <template v-if="answerList && answerList.length">
                <Question
                  v-for="(item, index) in answerList"
                  :key="`question_${index}`"
                  :info="item"
                />
              </template>
              <NoData v-else />
            </div>
          </template>
          <!-- 问答列表 end -->

          <!-- 分页 开始 -->
          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              prev-text="上一页"
              next-text="下一页"
              :current-page="pageNumber"
              :page-size="pageSize"
              :total="total"
              @current-change="changePage"
            >
            </el-pagination>
          </div>
          <!-- 分页 end -->
        </div>
        <!-- 左侧医院列表 end -->

        <!-- 右侧内容 开始 -->
        <div class="right_box">
          <!-- 机构入驻标准 开始 -->
          <SettleIn />
          <!-- 机构入驻标准 end -->
        </div>
        <!-- 右侧内容 end -->

        <!-- <NoData /> -->
      </div>
      <!-- 内容区域 end -->
    </div>
  </div>
</template>
<script>
import NoData from "@/components/nodata/index.vue";
import SettleIn from "@/components/apply/settlein.vue";
import ListHospital from "@/components/hospital/list.vue";
import Doctor from "@/components/doctor/index.vue";
import Goods from "@/components/goods/index.vue";
import Question from "@/components/question/index.vue";
import ListNews from "@/components/news/index.vue";
import {
  PLATFORM_TYPE,
  GET_HOSPITAL_SEARCH,
  GET_DOCTOR_SEARCH,
  GET_GOODS_SEARCH,
  GET_QUESTIONANSWER_SEARCH,
  GET_ARTICLE_SEARCH,
  GET_ORALCAVITYCASE_SEARCH,
} from "@/http/interface";
import qs from "qs";
export default {
  components: {
    NoData,
    SettleIn,
    ListHospital,
    Doctor,
    Goods,
    Question,
    ListNews,
  },
  data() {
    return {
      term: "",
      menus: [
        { name: "医院", id: 2 },
        { name: "医生", id: 3 },
        { name: "商品", id: 4 },
        { name: "资讯", id: 6 },
        { name: "问答", id: 7 },
      ],
      menuId: 2,
      total: 0,
      pageNumber: 1,
      pageSize: 10,
      hospitalList: [],
      doctorList: [],
      goodsList: [],
      newsList: [],
      caseList: [],
      answerList: [],
      caseLeftList: [],
      caseRightList: [],
    };
  },

  watchQuery: true,
  async asyncData({ query, $axios }) {
    let params = { pageSize: 10, term: query.term };
    let hospitalList = [];
    let doctorList = [];
    let goodsList = [];
    let newsList = [];
    let caseList = [];
    let answerList = [];
    let menuActive = Number(query.sid || 0);
    let caseLeftList = [];
    let caseRightList = [];
    let total = 0;
    let pageNumber = Number(query.pageNumber || 1);

    params.pageNumber = pageNumber;

    // 医院
    if (menuActive == 2) {
      let h = await $axios.get(GET_HOSPITAL_SEARCH, { params: params });
      let hobj = h.data || {};
      hospitalList = hobj.list || [];
      total = hobj.totalElements;
    }

    // 医生
    if (menuActive == 3) {
      let d = await $axios.get(GET_DOCTOR_SEARCH, { params: params });
      let dobj = d.data || {};
      doctorList = dobj.list || [];
      total = dobj.totalElements;
    }

    // 商品
    if (menuActive == 4) {
      let g = await $axios.get(GET_GOODS_SEARCH, { params: params });
      let gobj = g.data || {};
      goodsList = gobj.list || [];
      total = gobj.totalElements;
    }

    // 资讯
    if (menuActive == 6) {
      let n = await $axios.get(GET_ARTICLE_SEARCH, { params: params });
      let nobj = n.data || {};
      newsList = nobj.list || [];
      total = nobj.totalElements;
    }

    // 问答
    if (menuActive == 7) {
      let a = await $axios.get(GET_QUESTIONANSWER_SEARCH, { params: params });
      let aobj = a.data || {};
      answerList = aobj.list || [];
      total = aobj.totalElements;
    }

    // 案例
    if (menuActive == 5) {
      let c = await $axios.get(GET_ORALCAVITYCASE_SEARCH, { params: params });
      let cobj = c.data || {};
      caseList = cobj.list || [];
      caseList.map((k, i) => {
        if (i % 2 == 0) {
          caseLeftList.push(k);
        } else {
          caseRightList.push(k);
        }
      });
      total = cobj.totalElements;
    }

    return {
      hospitalList,
      doctorList,
      goodsList,
      answerList,
      newsList,
      caseList,
      menuId: menuActive,
      term: query.term,
      caseLeftList,
      caseRightList,
      term: query.term || "",
      total,
      pageNumber,
    };
  },
  methods: {
    // 菜单点击
    menuEvent(row) {
      this.menuId = row.id;
    },

    // 切换分页
    changePage(e) {
      this.pageNumber = e;
      this.navigateToPage();
    },

    // 切换路由
    navigateToPage() {
      //let query = this.$route.query
      let o = { pageNumber: this.pageNumber };
      if (this.classId) {
        o.classId = this.classId;
      }
      if (this.projectId) {
        o.projectId = this.projectId;
      }
      if (this.servicesId) {
        o.servicesId = this.servicesId;
      }

      if (this.classId || this.projectId || this.servicesId) {
        o.pageNumber = 1;
      }
      o.random = Math.random();
      //this.$routerReplace(o);
      let _path = `/search?${qs.stringify(o)}`
            this.$router.replace({
                path: _path
            })
    },

    getPath(row) {
      let o = this.$route.query;
      o.sid = row.id;
      o.random = Math.random();
      let _path = `/search?${qs.stringify(o)}`;
      console.log(_path);
      return _path;
    },

    getBreadcrumb() {
      let list = this.menus;
      let id = this.menuId;
      let o = list.find((k) => k.id == id);
      let _name = "";
      if (o) {
        _name = o.name;
      }
      return _name;
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/search/index.less";
</style>
